<template>
	<div class="container-fluid">
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="grid-content bg-purple">
					<div class="panel">
						<div class="panel-heading">
							<el-row>
								<el-col :span="8">
									<div class="grid-content bg-purple">
										<h3 class="panel-title">角色列表</h3>
									</div>
								</el-col>
								<el-col :span="16">
									<div class="grid-content bg-purple pull-right">
										<el-button-group>
											<el-button size="mini" icon="el-icon-plus" plain @click="createRoleItem"></el-button>
											<el-button size="mini" icon="el-icon-edit-outline" :disabled="!editRoleParams.name" plain @click="editRole"></el-button>
											<el-button size="mini" icon="el-icon-delete" :disabled="!editRoleParams.name" plain @click="deleteRole"></el-button>
										</el-button-group>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="panel-body">
							<el-table ref="singleTable" :data="roles" highlight-current-row style="width: 100%" @row-click="handleRoleClick">
								<el-table-column prop="code" label="编号"></el-table-column>
								<el-table-column prop="name" label="名称"></el-table-column>
								<el-table-column prop="users.length" label="绑定人数"></el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18">
				<div class="grid-content bg-purple">
					<div class="panel">
						<div class="panel-heading">
							<h3 class="panel-title">权限列表</h3>
						</div>
						<div class="panel-body">
							<el-tree ref="permissionsTree" :check-strictly="true" :data="permissions" :props="props" show-checkbox default-expand-all node-key="code" highlight-current></el-tree>
						</div>
						<div class="panel-footer text-center">
							<el-button type="primary" plain @click="syncRelationship" :disabled="editRoleParams.name === ''">保存修改</el-button>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-dialog title="创建角色" :visible.sync="createRoleDialog" width="400px" @close="handleCreateRoleFormClose">
			<el-form ref="createRuleForm" :model="createRoleParams" :rules="roleRules">
				<el-form-item label="角色编码" label-width="80px" prop="code">
					<el-input v-model="createRoleParams.code" :autofocus="true"></el-input>
				</el-form-item>
				<el-form-item label="角色名称" label-width="80px" prop="name">
					<el-input v-model="createRoleParams.name" :autofocus="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createRoleDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitCreateRole">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="编辑角色" :visible.sync="editRoleDialog" width="400px" @close="handleEditRoleFormClose">
			<el-form ref="editRuleForm" :model="editRoleParams" :rules="roleRules">
				<el-form-item label="角色编码" label-width="80px" prop="code">
					<el-input v-model="editRoleParams.code" :autofocus="true"></el-input>
				</el-form-item>
				<el-form-item label="角色名称" label-width="80px" prop="name">
					<el-input v-model="editRoleParams.name" :autofocus="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editRoleDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitUpdateRole">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Vue from 'vue'
	import api from '../apis'

	export default {
		name: "system-role",
		data () {
			return {
				loading: false,
				search: '',
				roles: [],
				createRoleParams: {
					code: '',
					name: ''
				},
				editRoleParams: {
					code: '',
					name: ''
				},
				roleRules: {
					code: [
						{ required: true, message: '请输角色编码', trigger: 'blur' }
					],
					name: [
						{ required: true, message: '请输角色名称', trigger: 'blur' }
					]
				},
				createRoleDialog: false,
				editRoleDialog: false,
				permissions: [],
				selectedNode: null,
				props: {
					children: 'children',
					label: 'name'
				}
			}
		},
		methods: {
			/**
			 * 获取角色信息
			 */
			fetchRoles () {
				api.role.fetchRoles().then(response => {
					this.roles = response.data;
				})
			},
			/**
			 * 获取权限信息
			 */
			fetchPermissions () {
				api.permission.fetchPermissions().then(response => {
					this.permissions = response.data;
				});
			},
			/**
			 * 获取角色的权限信息
			 */
			fetchRolePermissionRelations (role) {
				api.role.fetchPermissionRelationshipByCode(role.code).then(response => {
					this.$refs['permissionsTree'].setCheckedKeys(response.data);
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			},
			/**
			 * 创建角色信息
			 */
			createRoleItem () {
				this.createRoleDialog = true;
			},
			/**
			 * 提交创建角色表单
			 */
			submitCreateRole () {
				this.$refs['createRuleForm'].validate((valid) => {
					if (valid) {
						api.role.store(this.createRoleParams).then(response => {
							this.handleCreateRoleFormClose();
							let role = {...response.data};
							role.users = [];
							this.roles.push(role);
							this.$message.success('创建成功');
						}).catch(errors => {
							this.$message.error(errors.response.data.error);
						})
					} else {
						return false;
					}
				});
			},
			/**
			 * 提交更新角色信息表单
			 */
			submitUpdateRole () {
				this.$refs['editRuleForm'].validate((valid) => {
					if (valid) {
						api.role.update(this.editRoleParams.code, this.editRoleParams).then(() => {
							this.handleEditRoleFormClose();
							this.$message.success('更新成功');
						}).catch(errors => {
							this.$message.error(errors.response.data.error);
						})
					} else {
						return false;
					}
				});
			},
			/**
			 * 编辑角色
			 */
			editRole () {
				if (this.editParams.name === '') {
					this.$message.warning('请选择一个角色');
					return false;
				}
				this.editRoleDialog = true;
			},
			/**
			 * 删除角色
			 */
			deleteRole () {
				api.role.delete(this.editParams.code).then(() => {
					for (let i = 0; i < this.roles.length; i ++) {
						if (this.roles[i].code === this.editParams.code) {
							Vue.delete(this.roles, i);
							break;
						}
					}
					this.editParams = {
						code: '',
						name: ''
					};
					this.$message.success('删除成功');
				}).catch(errors => {
					this.$message.error(errors.response.data.error)
				})
			},
			/**
			 * 点击角色列表后触发
			 */
			handleRoleClick (item) {
				this.fetchRolePermissionRelations(item);
				this.editRoleParams = item
			},
			handleCreateRoleFormClose () {
				this.createRoleDialog = false;
				this.$refs['createRuleForm'].resetFields();
			},
			handleEditRoleFormClose () {
				this.editRoleDialog = false;
			},
			/**
			 * 更新角色和权限的关联关系
			 */
			syncRelationship () {
				let codes = this.$refs['permissionsTree'].getCheckedKeys();
				api.role.syncRelationship(this.editRoleParams.code, {
					relations: codes
				}).then(response => {
					this.$message.success('更新成功');
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			}
		},
		mounted () {
			this.fetchRoles();
			this.fetchPermissions();
		}
	}
</script>

<style lang="scss">
	.filter-input {
		margin-bottom: 20px;
	}
</style>
